<template>
  <div>
    <el-card>
      <div slot="header">
        <el-page-header @back="back">
          <template slot="content">
            <div class="container">
              <p>广告管理</p>
              <div>
                <el-input
                  v-model="search"
                  placeholder="编号/发起发/房产"
                ></el-input>
                <el-button type="primary" @click="route_add">添加</el-button>
              </div>
            </div>
          </template>
        </el-page-header>
      </div>
      <div>
        <el-table
          @cell-mouse-enter="set_currentItem"
          :data="final_db_adv"
          style="width: 100%"
        >
          <el-table-column
              prop="id"
              label="编号"
              width="width"
              align="center">
          </el-table-column>
          <el-table-column
            prop="issuer"
            label="发起方"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="propertyname"
            label="房产"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="img"
            label="海报"
            width="width"
            align="center"
          >
          <template slot-scope="scope">
            <div>
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.img"
                 :preview-src-list="srcList"
                :fit="fit"></el-image>
            </div>
          </template>
          </el-table-column>
          <el-table-column
            prop="startDate"
            label="开始日期"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="endDate"
            
            label="结束日期"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="prop"
            label="label"
            width="150"
            align="center"
          >
            <template slot="header" slot-scope="scope"> </template>
            <template slot-scope="scope">
<!--              <el-button type="primary" size="small">修改</el-button>-->
              <el-button type="info" @click="delItem(scope.row.id)" size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
import { mapState } from "vuex";


export default {
  mounted() {

  },
  computed: {
    ...mapState(["db_adv"]),
    srcList(){
      let res = []
      for(let i of this.db_adv){
        res.push(i.img)
      }
      return res
    },
    final_db_adv() {
      return this.db_adv.filter(
        (x) =>
          this.search == "" ||
          String(x.id).startsWith(this.search) ||
          String(x.property).startsWith(this.search)
      );
    },
  },
  methods: {
    delItem(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //网络请求
        //如果返回码是200
        this.$store.commit("del_db_adv", row.id);
        this.$message.success("删除成功");
      })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
    },
    set_currentItem(row, column, cell, event) {
      this.currentItem = row;
    },
    back() {
      this.$router.go(-1);
    },
    route_add() {
      this.$router.push("advertisement-add");
    },
  },
  data() {
    return {
      currentItem: {
        id: '',
        img:"",
        issuer: "",
        propertyname: "",
        startDate:"",
        endDate:""
      },
      search: "",
      tableData: [
        {
          id: 0,
          img:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F6d1991b936040f2ff078d97131960bfdce37c2416abc3-Ory2Wc_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635158813&t=5d20a7326df5e81867a03b0b57f60bd3",

          issuer: "浙房产",
          propertyname: "浙商房产",
         startDate:"2020/8/12 08:00",
          endDate:"2020/8/12 08:00"
        },
        {
          id: 1,
          img:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftuddimgs.oss-cn-hangzhou.aliyuncs.com%2F202002%2FDesign006_dCY8Hj7NNQ.jpg%3Fx-oss-process%3Dstyle%2Fprev_w_750_h_auto&refer=http%3A%2F%2Ftuddimgs.oss-cn-hangzhou.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635159612&t=312aa397d815fa210480a5060cdaf088",

          issuer: "浙里帮卖",
          propertyname: "浙商房产",
          startDate:"2020/8/12 08:00",
          endDate:"2020/8/12 08:00"
        },
      ],
    };
  },
};
</script>
<style scoped>
.el-card {
  margin-top: 2rem;
}
.el-card >>> .el-page-header__content {
  flex: 1;
}
.el-card >>> .el-page-header__left {
  align-items: center;
}
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container p {
  text-align: left;
}
.container > div {
  display: flex;
}
</style>